[@main.layout title="form-demo - index"]

<h1>Form Demo #2</h1>

<p>This is a typical user registration form. The controller will validate the inputs and make values sticky so that
when failed, fields are repopulated. </p>

[#if submitSuccessful??]
<p>FormValues from a successful submit.</p>
<table border="1">
	[#list formData.multiValues?keys as fieldName]
	<tr>
		<td>${formData.fields[fieldName].label}</td>
		<td>
			<ul style="color: blue; list-style-type: none">
				[#list formData.multiValues[fieldName] as value]
				<li>${value}</li>
				[/#list]
			</ul>
		</td>
	</tr>
	[/#list]
</table>
<hr/>
[/#if]

<form name="${formData.formName}" action="${reqRoute.handlerPath}" method="post">
<table>

[#assign name='username']
[#assign field = formData.fields[name]]
<tr style="height: 50px; vertical-align: top">
	<td>${field.label}: </td>
	<td>
		<input type="text" name="${formData.formName}.${field.name}" 
			value="${formData.singleValues[field.name]}"/><span style="color: red;"> *</span>
	</td>
	<td>
		[#if formData.errors[field.name]??]
		<ul style="color:red; list-style-type: none">[#list formData.errors[field.name] as err]<li>${err}</li>[/#list]</ul>
		[/#if]
	</td>
</tr>

[#list ['password', 'cpassword'] as name]
[#assign field = formData.fields[name]]
<tr style="height: 50px; vertical-align: top">
	<td>${field.label}: </td>
	<td>
		<input type="password" name="${formData.formName}.${field.name}" 
			value="${formData.singleValues[field.name]}"/><span style="color: red;"> *</span>
	</td>
	<td>
		[#if formData.errors[field.name]??]
		<ul style="color:red; list-style-type: none">[#list formData.errors[field.name] as err]<li>${err}</li>[/#list]</ul>
		[/#if]
	</td>
</tr>
[/#list]


[#list ['firstName', 'lastName', 'email'] as name]
[#assign field = formData.fields[name]]
<tr style="height: 50px; vertical-align: top">
	<td>${field.label}: </td>
	<td>
		<input type="text" name="${formData.formName}.${field.name}" 
			value="${formData.singleValues[field.name]}"/>
	</td>
	<td>
		[#if formData.errors[field.name]??]
		<ul style="color:red; list-style-type: none">[#list formData.errors[field.name] as err]<li>${err}</li>[/#list]</ul>
		[/#if]
	</td>
</tr>
[/#list]


<tr style="height: 50px; vertical-align: top">
	<td colspan="3"><input type="submit" value="Process Form"/></td>
</tr>

</table>
</form>

[/@main.layout]
